<template>
    <div id="app-content">
      <ul>
        <li v-for="person in persons">
          <span >{{ person.name }}</span>
          <span >{{ person.email }}</span>
        </li>
      </ul>
    </div>
</template>

<script>
  /*
  *   props: 父组件向子组件传值（string、nmber...） / 传引用（array、object）
  */
    export default {
        name: "app-content",
        props: ['persons'],
        // data() {
        //     return{
        //         persons: []
        //     }
        // }
    }
</script>

<style scoped>
  #app-content {
    margin: 150px auto;
  }
  ul {
    margin: 5%;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    margin: 10px;
    padding: 20px;
    flex-grow: 1;
    flex-basis: 200px;
    border: 2px solid #c5c3bd;
    list-style: none;
    font-size: large;
  }
  span {
    display: block;
  }
</style>
